<template>
  <app-page card full>
    <template #header>{{ $route.params.id ? '编辑文章' : '新增文章' }}</template>
    <el-form ref="appForm" :model="appDetail" label-width="105px" @submit.prevent="handleSubmit">
      <jax-desc title="基本信息" :style="'max-width:800px'">
        <jax-form-group :json="detailJson" v-model="appDetail"></jax-form-group>
      </jax-desc>
      <jax-desc title="高级" :style="'max-width:460px'">
        <jax-form-group :json="extendJson" v-model="appDetail">
          <template #area>
            <el-form-item label="供应商地区" prop="area" :rules="[{ required: true, message: '请选择供应商地区', trigger: 'blur' }]">
              <jax-area-cascader v-model="appDetail.area" style="width: 100%" />
            </el-form-item>
          </template>
        </jax-form-group>
      </jax-desc>
      <jax-desc title="分享设置" :style="'max-width:460px'">
        <jax-form-group :json="shareJson" v-model="appDetail.share"></jax-form-group>
      </jax-desc>
    </el-form>
    <template #footer>
      <div class="app-toolbar">
        <el-button type="default" @click="appHandleCancel">返回</el-button>
        <el-button type="primary" @click="appHandleSubmit">保存</el-button>
      </div>
    </template>
  </app-page>
</template>

<script>
import { mapState } from 'vuex'
import { mixins } from 'jax-node'
import JaxAreaCascader from '@/jax-base/components/AreaCascader.vue'

export default {
  mixins: [mixins.pageEdit],
  components: {
    JaxAreaCascader,
  },
  data() {
    return {
      // 默认数据
      appDefaultDetail: {
        share: {},
      },
    }
  },
  computed: {
    ...mapState('app', ['userInfo']), // 用户信息
    // 详情JSON
    detailJson() {
      const required = true
      const miniInput = { style: 'width:120px' }

      return [
        { name: 'rank', label: '序号', type: 'number', tips: '（序号越小越靠前）', inputAttr: miniInput },
        { name: 'title', label: '标题', required, inputAttr: { style: 'width:355px' } },
        { name: 'desc', label: '描述', type: 'textarea', required, inputAttr: { style: 'width:355px' } },
        {
          name: 'type',
          label: '类型',
          type: 'select',
          options: [
            { value: 0, label: '文章' },
            { value: 1, label: '视频' },
          ],
        },
        {
          name: 'isOpen',
          label: '状态',
          type: 'select',
          options: [
            { value: 0, label: '待审核' },
            { value: 1, label: '上线' },
            { value: 2, label: '下线' },
          ],
          required,
        },

        {
          name: 'isOpen',
          label: '状态',
          type: 'switch',
          inputAttr: {
            'active-value': 1,
            'inactive-value': 2,
          },
        },
        { name: 'cover', label: '单图', type: 'upload-image', required: '请上传封面图' },
        { name: 'banners', label: '多图', type: 'upload-images', required: '请上传内容顶图' },
      ]
    },
    // 高级JSON
    extendJson() {
      const required = true
      const miniInput = { style: 'width:120px' }

      return [{ name: 'area', label: '供应商地区' }]
    },
    // 分享JSON
    shareJson() {
      const required = true
      const miniInput = { style: 'width:120px' }

      return [
        {
          name: 'title',
          label: '分享标题',
          prop: 'share.title',
        },
        {
          name: 'imageUrl',
          label: '分享图片',
          type: 'upload-image',
          prop: 'share.imageUrl',
        },
      ]
    },
  },
  created() {},
  methods: {
    // 获取数据前
    appBeforeFetch(detail) {
      if (detail.province) {
        detail.area = {
          province: detail.province,
          city: detail.city,
          district: detail.district,
        }
      }
    },
    // 保存前
    appBeforeSubmit(detail) {
      // if (!detail.area.province) {
      //   this.$message.warning('请选择省市区')
      //   return false
      // }

      detail.province = detail.area.province
      detail.city = detail.area.city
      detail.district = detail.area.district
    },
  },
}
</script>

<style lang="scss" scoped></style>
